﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>天气实况</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=v1HSNrafV1En2G31ctO1IwTS&v=2.0"></script>
    
    <style type="text/css">
        body, html, #map_weather
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
        #map_title
        {
            width: 300px;
            position: absolute;
            left: 50%;
            margin-top: 10px;
            margin-left: -150px;
            z-index: 4;
            border: solid;
            border-width: 2px;
            background-color: white;
        }
        #map_title span
        {
            font-size: 16px;
            width: 300px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            float: left;
        }
        /* 自定义覆盖物的样式 */
        .square-overlay
        {
            position: absolute;
            border: solid;
            border-color: red;
            border-width: 1px;
        }
        .square-overlay-thunder {
            position: absolute;
            border: none;
            border-width: 1px;
        }
    </style>
</head>
<body>
    <div id="map_title">
    </div>
    <div id="map_weather">
    </div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("map_weather"); //创建MAP实例
    var centerPoint = new BMap.Point(@ViewBag.Lon,@ViewBag.Lat);
    map.centerAndZoom(centerPoint, 12); //初始化地图，设置中心坐标和地图级别
    //map.addControl(new BMap.ZoomControl()); //添加地图缩放控件

    //自定义方形覆盖物
    function SquareOverlay(point, width, height, className, content) {
        this._point = point;
        this._width = width;
        this._height = height;
        this._className = className;
        this._content = content;
    }
    // 继承API的BMap.Overlay      
    SquareOverlay.prototype = new BMap.Overlay();
    // 实现初始化方法
    SquareOverlay.prototype.initialize = function (map) {
        // 保存map对象实例     
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器     
        var div = document.createElement("div");
        // 可以根据参数设置元素外观
        div.className = this._className;
        div.style.width = this._width + "px";
        div.style.height = this._height + "px";
        div.innerHTML = this._content;
        // 将div添加到覆盖物容器中     
        map.getPanes().markerPane.appendChild(div);
        // 保存div实例     
        this._div = div;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、     
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。     
        return div;
    };
    // 实现绘制方法
    SquareOverlay.prototype.draw = function () {
        //根据地理坐标转换为像素坐标，并设置给容器      
        var position = this._map.pointToOverlayPixel(this._point);
        this._div.style.left = position.x - this._width / 2 + "px";
        this._div.style.top = position.y - this._height / 2 + 10 + "px";
    };
    // 实现显示方法
    SquareOverlay.prototype.show = function () {
        if (this._div) {
            this._div.style.display = "";
        }
    };
    // 实现隐藏方法
    SquareOverlay.prototype.hide = function () {
        if (this._div) {
            this._div.style.display = "none";
        }
    };

    var showType = "@Html.Raw(ViewBag.WeatherType)";
    var weatherInfo = @Html.Raw(ViewBag.WeatherJson);
    var mapTitle = document.getElementById("map_title");
    var titleFlag = "天气实况";
     switch (showType.toLowerCase()) {
     case "temp":
         titleFlag = "温度监测";
         break;
     case "f":
         titleFlag = "风力监测";
         break;
     case "rain":
         titleFlag = "降水监测";
         break;
     case "visib":
         titleFlag = "能见度监测";
         break;
     default:
         break;
     }
     mapTitle.innerHTML = "<span >" + weatherInfo.Title.replace(/天气实况/g, titleFlag) + "</span><span>详情点击站点标记</span>";

    for (var i = 0; i < weatherInfo.Content.length; i++) {
        var station = weatherInfo.Content[i];
        var change = station.Change;
        var point = new BMap.Point(station.Lon, station.Lat);//坐标点
        var myIcon = new BMap.Icon("/images/blue_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });//自定义标记图标        
        //信息窗口参数
        var opts = {
            width: 160,
            height: 65,
            title: "<span style='font-size: 12px'>" + station.Name + "</span>",
            enableMessage:false
        };
        var content = "";
        var squareMsg = "";
        switch (showType.toLowerCase()) {
            case "temp":
                content = "<span style='font-size: 12px'>气温：" + change.Temp + "℃<br/>发布时间：" + weatherInfo.Rnewtime + "</span>";
                if (change.Tmin != null && change.Tmax != null && change.Tmin != 0 && change.Tmax != 0) {
                    opts.height = 105;
                    content = "<span style='font-size: 12px'>气温：" + change.Temp + "℃<br/>今天最高：" + change.Tmax + "℃<br/>今天最低：" + change.Tmin + "℃<br/>发布时间：" + weatherInfo.Rnewtime + "</span>";
                }
                squareMsg = station.Name + " " + change.Temp + "℃";
                if (change.Temp <= 5 || change.Temp >= 35) {
                    myIcon = new BMap.Icon("/images/red_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });
                }
                break;
            case "rain":
                var r = change.Rain == "" ? "0" : change.Rain;
                content = "<span style='font-size: 12px'>雨量：" + r  + "毫米<br/>发布时间：" + weatherInfo.Rnewtime + "</span>";
                squareMsg = station.Name + " " + r + "毫米";
                if (change.Rain >= 10) {
                    myIcon = new BMap.Icon("/images/red_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });
                }
                break;
            case "f":
                content = "<span style='font-size: 12px'>风力：" + change.Ff + (change.Ff == "微风" ? "" : "米/秒") + "<br/>发布时间：" + weatherInfo.Rnewtime + "</span>";
                squareMsg = station.Name + " " + change.Ff + (change.Ff == "微风" ? "" : "米/秒");
                if (change.Ff >= 17.2) {
                    myIcon = new BMap.Icon("/images/red_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });
                }
                break;
            case "visib":
                content = "<span style='font-size: 12px'>能见度：" + change.Visibility + "米<br/>发布时间：" + weatherInfo.Rnewtime + "</span>";
                squareMsg = station.Name + " " + change.Visibility + "米";
                if (change.Visibility <= 1000) {
                    myIcon = new BMap.Icon("/images/red_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });
                }else if (change.Visibility > 1000 && change.Visibility <= 10000) {
                    myIcon = new BMap.Icon("/images/yellow_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });
                } else {
                    myIcon = new BMap.Icon("/images/blue_marker.png", new BMap.Size(19, 25), { anchor: new BMap.Size(19, 25) });
                }
                break;
            case "intensity":
                content = "<span style='font-size: 12px'>强度：" + change.Intensity + "<br/>发布时间：" + weatherInfo.Rnewtime + "</span>";
                squareMsg = change.Intensity ;
                if (change.Intensity > 0) {
                    myIcon = new BMap.Icon("/images/red_thunder.png", new BMap.Size(25, 25), { anchor: new BMap.Size(25, 25) });
                } else {
                    myIcon = new BMap.Icon("/images/blue_thunder.png", new BMap.Size(25, 25), { anchor: new BMap.Size(25, 25) });
                }
                opts.title = "";
                break;
            default:
                break;
        }
        //添加地图标注信息
        var marker = new BMap.Marker(point, { icon: myIcon });// 创建标注
        //var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        if (showType.toLowerCase() != "intensity") {
            (function() {
                var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
                marker.addEventListener("click", function() { this.openInfoWindow(infoWindow, point); });
            })();
        }
        // 添加自定义覆盖物
        if (showType.toLowerCase() == "intensity") {
            map.addOverlay(new SquareOverlay(point, squareMsg.length * 12, 20, "square-overlay-thunder", "<span style='font-size: 12px;margin-left: -5px;'>" + squareMsg + "</span>"));
        } else {
            map.addOverlay(new SquareOverlay(point, squareMsg.length * 12, 20, "square-overlay", "<span style='font-size: 12px;margin-left: 5px;'>" + squareMsg + "</span>"));
        }
        
    }
</script>
